<template>
  <div class="mask">
    <div class="login_box">
      <div class="avator_box">
        <img width="100%" height="100%" style="border-radius:50%" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F53%2F0a%2Fda%2F530adad966630fce548cd408237ff200.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641542569&t=b0b318725ce280808c2f3fd902cfa921" alt="">
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="login_form">
        <el-form-item prop="username">
          <el-input placeholder="请输入用户名" v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input show-password placeholder="请输入密码" v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
          <el-button type="info" @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login } from '../utils/api'
export default {
  data () {
    return {
      // 表单
      ruleForm: {
        username: '',
        password: ''
      },
      // 表单规则
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 4, max: 12, message: '长度在 4 到 12 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 4, max: 12, message: '长度在 4 到 12 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    // 提交表单
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await login(this.ruleForm.username, this.ruleForm.password);
          if (res.status == 0) {
            window.sessionStorage.setItem('token', res.token);
            this.$message({
              message: '登录成功！',
              type: 'success'
            });
            this.$router.push('/home');
          } else {
            this.$message.error('登陆失败，用户名或密码错误！');
          }
        }
      });
    },
    // 重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
  }
}
</script>

<style lang="less" scoped>
	.mask{
		height: 100%;
		width:100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #2b4b6b;
		display: flex;
		.login_box{
			margin: auto;
			width: 450px;
			height: 300px;
			background-color: #fff;
			border-radius: 10px;
			position: relative;
			.avator_box{
				width: 152px;
				height: 152px;
				border-radius: 50%;
				position: absolute;
				top: -70px;
				left: 50%;
				margin-left: -76px;
				padding: 10px;
				background-color: #fff;
				border: 1px solid #eee;
				box-shadow: 0 0 10px #ddd;
			}
			.login_form{
				padding: 0 30px;
				width: 100%;
				position: absolute;
				bottom: 0;
			}
		}
	}

	.el-form-item:last-child{
		display: flex;
		justify-content: flex-end;
	}
</style>